{% extends 'base.html' %}

{% load static %}

{% block title %}
{{ teacher.me.first_name }}
{% endblock %}

{% block css %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'css/teacher.css' %}">
{% endblock %}

{% block content %}
<div class="container">
	<div class="columns">
		<div class="column col-6 col-lg-8 col-md-10 col-sm-12 col-lg-auto col-md-auto col-sm-auto col-mx-auto">
			
			<p class="h5">请在此添加新的课程</p>

			<form class="form" id="add-class" method="post" action="/teacher/add-class">{% csrf_token %}
				<input type="number" value="{{ teacher.pk }}" name="teacher_id" hidden>

				{% verbatim vue %}
				<div class="form-group">
					<select class="form-select" name="weekday" v-model="class_weekday" v-bind:class="{'is-error': class_weekday == -1}">
						<option value="-1" disabled selected>星期</option>
						<option v-for="(index, weekday) in weekdays" value="{{index}}">{{ weekday }}</option>
					</select>
				</div>
				{% endverbatim vue %}

				<div class="form-group">
					<select class="form-select" name="student_id" v-model="class_student" v-bind:class="{'is-error': class_student == -1}">
						<option value="-1" disabled selected>学生</option>
						{% for student in teacher.students.all %}
						<option value="{{ student.pk }}">{{ student.me.last_name }} {{ student.me.first_name }}</option>
						{% endfor %}
					</select>
				</div>

				<div class="form-group">
					<input class="form-input" name="begin" type="text" v-model="class_begin" v-bind:class="{'is-error': !checkBegin(class_begin)}" placeholder="开始时间(如 7:00)">
				</div>

				<div class="form-group">
					<input class="form-input" name="duration" type="number" v-model="class_duration" v-bind:class="{'is-error': !checkDuration(class_duration)}" placeholder="时长(如 45)">
				</div>

				<div class="form-group">
					<button class="btn btn-primary" type="submit" v-on:click="beforeSubmit">确定</button>
				</div>

			</form>

		</div>
	</div>
</div>
{% endblock %}

{% block javascript %}
<script type="text/javascript" src="{% static 'js/js.cookie.js' %}"></script>
<script type="text/javascript" src="{% static 'js/teacher-add-class.js' %}"></script>
<script type="text/javascript">
navbar.$set('brand', '{{ teacher.me.first_name }}')
navbar.$set('brand_url', '/accounts/profile?teacher_id={{ teacher.pk }}')
</script>
{% endblock %}